<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" xmlns:p="http://primefaces.org/ui">

<h:head>
	<f:facet name="first">
		<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
		<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
		<title>PrimeFaces - ShowCase</title>
	</f:facet>

	<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
	<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />

	<style type="text/css">
.ui-layout-north {
	z-index: 20 !important;
	overflow: visible !important;;
}

.ui-layout-north .ui-layout-unit-content {
	overflow: visible !important;
}

.center {
	margin: auto;
	width: 1024px;
}
</style>
</h:head>

<h:body>
	<div class="center">
		<p:layout style="width:1024px;height:100%">

			<p:layoutUnit id="top" position="north" size="50" style="border:none">
				<p:menubar>
					<p:submenu label="File" icon="ui-icon-document">
						<p:submenu label="New" icon="ui-icon-contact">
							<p:menuitem value="Project" url="#" />
							<p:menuitem value="Other" url="#" />
						</p:submenu>
						<p:menuitem value="Open" url="#" />
						<p:menuitem value="Quit" url="#" />
					</p:submenu>
					<p:submenu label="Edit" icon="ui-icon-pencil">
						<p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w" />
						<p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e" />
					</p:submenu>
					<p:submenu label="Help" icon="ui-icon-help">
						<p:menuitem value="Contents" url="#" />
						<p:submenu label="Search" icon="ui-icon-search">
							<p:submenu label="Text">
								<p:menuitem value="Workspace" url="#" />
							</p:submenu>
							<p:menuitem value="File" url="#" />
						</p:submenu>
					</p:submenu>
				</p:menubar>
			</p:layoutUnit>

			<p:layoutUnit id="bottom" position="south" size="20" style="border:none">
			</p:layoutUnit>

			<p:layoutUnit id="left" position="west" size="300" minSize="200" style="border:none">
				<p:accordionPanel>
					<p:tab title="Menu 1">
						<br />
						<p:calendar mode="inline" navigator="none" />
						<br />
					</p:tab>

					<p:tab title="Menu 2">
						<h:outputText value="Menu 2 Content" />
					</p:tab>

					<p:tab title="Menu 3">
						<h:outputText value="Menu 3 Content" />
					</p:tab>
				</p:accordionPanel>
			</p:layoutUnit>

			<p:layoutUnit id="center" position="center" style="border:none;width:100%;">
				<h:form>
					<p:panel header="Modulos">

						<p:panelGrid columns="4" style="border:1px;width:100%;">
							<p:column style="width:25%;height:200px">
								<p:commandLink update="" oncomplete="PF('carDialog').show()" title="View Detail">
									<p:graphicImage value="/images/Volvo.gif" />
									<br />
									<h:outputText value="a" styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
								</p:commandLink>
							</p:column>
							<p:column style="width:25%;height:200px">
								<p:commandLink update="" oncomplete="PF('carDialog').show()" title="View Detail">
									<p:graphicImage value="/images/Volvo.gif" />
									<br />
									<h:outputText value="b" styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
								</p:commandLink>
							</p:column>
							<p:column style="width:25%;height:200px">
								<p:commandLink update="" oncomplete="PF('carDialog').show()" title="View Detail">
									<p:graphicImage value="/images/Volvo.gif" />
									<br />
									<h:outputText value="c" styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
								</p:commandLink>
							</p:column>
							<p:column style="width:25%;height:200px">
								<p:commandLink update="" oncomplete="PF('carDialog').show()" title="View Detail">
									<p:graphicImage value="/images/Volvo.gif" />
									<br />
									<h:outputText value="d" styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
								</p:commandLink>
							</p:column>
						</p:panelGrid>
					</p:panel>

					<p:panel header="Keyboard Demo">
						<p:keyboard value="#{keyboardBean.value}" />
					</p:panel>
					<p:commandButton value="Submit" />

					<p:commandButton onclick="PF('usuarioEditDialog').show();" value="asdasdas"/>
					<p:dialog header="Editar usuario" widgetVar="usuarioEditDialog" showEffect="explode" hideEffect="bounce" height="100">
						<h:outputText value="This dialog has nice effects." />
					</p:dialog>

				</h:form>
			</p:layoutUnit>
		</p:layout>
	</div>

	<p:dialog header="Basic Dialog" widgetVar="dlg" modal="true">
		<h:outputText value="Resistance to PrimeFaces is futile!" />
	</p:dialog>
</h:body>
</html>